<template>
  <div id="authnewindex">
    <div class="right1" style="width: 100%">
      <div id="authnewindex1">
        <div class="left">
          <h3 class="ah3">角色树</h3>
          <div class="juese">
            <div
              v-for="(i, k) in treeData"
              :key="i.jsid"
              class="juesheshu"
              @click="btn_jss(i, k)"
              :class="{ dynamic_clacss: k == dynamicClass }"
            >
              {{ i.name }}
            </div>
          </div>
        </div>

        <div class="right">
          <div class="top">
            <div class="btn">
              <div class="saixuna">
                <div style="margin-left: 20px">选择部门：</div>
                <el-select
                  v-model="pageOfYh.bmid"
                  class="select_bumen"
                  clearable
                  size="small "
                  @change="as_cd_list"
                  style="width: 180px"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in deptDatas"
                    :key="item.bmid"
                    :label="item.bmjc"
                    :value="item.bmid"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
            <el-button
              type="primary"
              size="small"
              class="btn_anliu"
              style="margin-right: 20px"
              @click="que1tin"
              >确认授权</el-button
            >
          </div>
          <div class="tables">
            <div class="caidan_list">
              <el-transfer
                v-model="wqy_list"
                filterable
                class="transfer_xxxxx"
                :titles="['未授权', '已授权']"
                :data="tableData"
                :button-texts="['到左边', '到右边']"
                @change="transfer_btn"
                :props="{
                  key: 'ryid',
                  label: 'name',
                }"
              ></el-transfer>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      wqy_list: [],
      deptDatas: [],
      treeData: [],
      roleId: '',
      jss: [],
      dynamicClass: 0,
      selection: null,
      tableData: [],
      pageOfYh: {
        bmid: '',
        jsid: ''
      },
    }
  },
  created() {
    this.apiTreeData()
    this.apiGetDeptList()
  },
  mounted() {
    this.$nextTick(() => {
      let checkbox = document.getElementsByClassName('el-checkbox__label')
      checkbox[0].style.color = '#f56c6c'
      checkbox[1].style.color = '#67c23a'
    })
  },
  methods: {
    handleMenu(e) {
      this.$axios.post('/zzjg/roleAuth/doAuth', e).then((res) => {
        let { data } = res.data
        if (data) {
          this.$message({
            type: 'success',
            message: '操作成功!',
          })
        }
      })
    },
    // 获取角色树
    apiTreeData() {
      this.$axios.get('/communal/role/getList').then((res) => {
        if (res) {
          this.treeData = res
          this.jss = res
          this.roleId = res[0].roleId
          this.pageOfYh.jsid = res[0].roleId
          this.as_cd_list()
        }
      })
    },
    // 获取部门
    apiGetDeptList() {
      this.$axios.post('/communal/dept/selector').then((res) => {
        this.deptDatas = res
      })
    },
    // 获取授权列表
    as_cd_list() {
      this.$axios.post('/communal/emp/bumenRoleEmps', this.pageOfYh).then((res) => {
        if (res) {
          this.tableData = res.unauthed
          this.wqy_list = []
          res.authed.forEach(item=>{
            this.wqy_list.push(item.ryid)
          })
          console.log('wqy_list', this.wqy_list)
        }
      })
    },
    // 确认授权
    que1tin() {
      let postData = {
        ryids: this.wqy_list,
        jsid: this.roleId,
        bmid: this.pageOfYh.bmid
      }
      this.$axios.post('/communal/emp/roleAssign', postData).then((res) => {
        if (res==true) {
          this.$message({
            type: 'success',
            message: '操作成功!',
          })
        }
      })
    },
    // 角色树点击
    btn_jss(i, k) {
      this.dynamicClass = k
      this.roleId = i.roleId
      if (i.yhidList) {
        this.wqy_list = i.yhidList
      } else {
        this.wqy_list = []
      }
      this.pageOfYh.jsid = i.roleId
      this.as_cd_list()
    },
    // 到左边到右边
    transfer_btn(selection) {
      console.log(selection)
      this.selection = selection
    },
  },
}
</script>

<style lang='scss' scoped>
#authnewindex {
 ::v-deep .el-dialog__title {
    font-weight: bold;
  }
  .authDialog {
    margin-top: 15vh;
  }
  .addDialog {
    margin-top: 1.5vh;
   ::v-deep.el-dialog {
      margin-top: 0vh !important;
    }
  }
  .bianjijusehe {
   ::v-deep.el-dialog {
      margin-top: 30vh !important;
    }
  }

  padding: 20px 0px 0px 10px;
  margin-left: 20px;
  font-size: 14px;
  background: #f7f7f7;
  width: calc(100% - 20px);
  overflow-x: hidden;
  height: calc(100% - 20px);
  display: flex;
}
#authnewindex1 {
 ::v-deep.el-transfer {
    width: 100%;
    height: 100%;
    .el-transfer-panel {
      width: calc((100% - 290px) / 2);
      height: 100%;
      .el-transfer-panel__body {
        height: 100%;
      }
      .el-transfer-panel__item {
        margin-top: 10px;
        margin-bottom: 10px;
      }
      .el-checkbox-group {
        height: calc(100% - 102px);
      }
    }
    .el-transfer__buttons {
      display: inline-block;
    }
  }

 ::v-deep .el-dialog__title {
    font-weight: bold;
  }
  .authDialog {
    margin-top: 15vh;
  }
  .addDialog {
    margin-top: 1.5vh;
   ::v-deep.el-dialog {
      margin-top: 0vh !important;
    }
  }
  .bianjijusehe {
   ::v-deep.el-dialog {
      margin-top: 30vh !important;
    }
  }

  font-size: 14px;
  background: #f7f7f7;
  margin-left: 0;
  width: 100%;
  height: calc(100% - 20px);
  display: flex;
  .left {
    .juese {
      height: calc(100% - 60px);
      overflow-y: auto;
    }
    margin-left: 10px;
    width: 20%;
    height: 100%;
    background: #ffffff;
    border-right: 1px solid #e1e1e1;
    border-radius: 3px;
    box-shadow: -1px 0px 3px 0px rgba(17, 14, 37, 0.05);
    .juesheshu {
      cursor: pointer;
      font-size: 14px;
      padding: 20px 0;
      padding-left: 38%;
      opacity: 0.7;
    }
    .ah3 {
      padding: 20px 0;
      border-left: 3px solid #3e7ef2;
      background: #ecf8ff;
      font-size: 18px;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      font-weight: bold;
      text-align: center;
      color: #666666;
      line-height: 22px;
      letter-spacing: 0px;
    }
    .dynamic_clacss {
      background: #3e7ef2;
      font-size: 14px;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      font-weight: 400;
      color: #ffffff;
      line-height: 22px;
      letter-spacing: 0px;
    }
  }
  .right {
    margin-left: 20px;
    width: calc(80% - 40px);
    height: 100%;
    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      background: #ffffff;
      border-left: 3px solid #3e7ef2;
      height: 60px;
      .saixuna {
        display: flex;
        align-items: center;
        .select_bumen {
          width: 180px;
        }
        .input_renyuan {
          width: 180px;
        }
      }

      .btn {
        padding-right: 20px;
        .btn_anliu {
          margin-left: 10px;
        }
      }
    }
    .tables {
      display: flex;
      width: 100%;
      margin-top: 20px;
      height: calc(100% - 80px);
     ::v-deep .el-table {
        height: 100%;
        .cell {
          height: 46px;
          line-height: 45px;
        }
      }
      .renyuan_list {
        width: 40%;
        height: 100%;
      }
      .caidan_list {
        width: 100%;
        margin-left: 0px;
        height: 100%;
      }
    }
  }
}
</style>